<!-- 注意：此组件需要结合grid组件使用 -->
<style lang="scss">
// 让按钮始终右对齐
.table-search {
    padding: 18px 18px 0;
    margin-bottom: 10px;

    .el-form {
        .el-form-item__content>* {
            width: 100%;
        }

        // 去除时间选择器上下 padding
        .el-range-editor.el-input__wrapper {
            padding: 0 10px;
        }
    }

    .operation {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-bottom: 18px;
        
    }
}
</style>
<template>
    <SearchForm :search="search" :reset="reset" :columns="searchColumns" :search-param="searchParam"
        :search-col="searchCol" />
        
</template>
<script setup lang="tsx" name="SearchForm">
import { ref } from "vue";
import SearchForm from "@/components/SearchForm/index.vue";
import { ColumnProps } from "@/components/ProTable/interface/index";
let search = () => {
    //搜索请求api，携带searchParam发送请求，这个search会传递给组件内的搜索按钮
}
let reset = () => {
    //重置方法
}
// 发送请求获取下拉框数据的方法
let getUserGender = () => {
    return new Promise<void>((resolve, reject) => {
    })
}
//参数应该是SearchForm内部获取的,然后props传递给SearchForm,有{}才能写入参数
let searchParam = ref({})

//每个表单的配置项
const searchColumns: ColumnProps[] = [
    { label: '用户名', prop: 'username', search: { el: "input", } },
    //自定义form
    {
        label: '年龄', prop: 'age', search: {
            render: ({ searchParam }) => {
                return (
                    <div class="flx-center">
                        <el-input vModel_trim={searchParam.minAge} placeholder="最小年龄" />
                        <span class="mr10 ml10">-</span>
                        <el-input vModel_trim={searchParam.maxAge} placeholder="最大年龄" />
                    </div>
                );
            }
        }
    },
    //下拉框,字典请求携带参数时为enum: () => getUserGender({ id: 1 }),props重谢el-select原生的属性
    { label: '性别', prop: 'gender', enum: getUserGender, search: { el: "select", props: { filterable: true } }, fieldNames: { label: "genderLabel", value: "genderValue" } },
    { label: '身份证号', prop: "idCard", search: { el: "input" } },
    { label: '邮箱', prop: "email", search: { el: "input" } },
];
// 表单不同界面大小的布局
let searchCol = { xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }




// ColumnProps类型
// export interface ColumnProps<T = any> extends Partial<Omit<TableColumnCtx<T>, "children" | "renderCell" | "renderHeader">> {
//   tag?: boolean; // 是否是标签展示
//   isShow?: boolean; // 是否显示在表格当中
//   search?: SearchProps | undefined; // 搜索项配置
//   enum?: EnumProps[] | ((params?: any) => Promise<any>); // 枚举类型（字典）
//   isFilterEnum?: boolean; // 当前单元格值是否根据 enum 格式化（示例：enum 只作为搜索项数据）
//   fieldNames?: FieldNamesProps; // 指定 label && value && children 的 key 值
//   headerRender?: (scope: HeaderRenderScope<T>) => VNode; // 自定义表头内容渲染（tsx语法）
//   render?: (scope: RenderScope<T>) => VNode | string; // 自定义单元格内容渲染（tsx语法）
//   _children?: ColumnProps<T>[]; // 多级表头
// }
// SearchProps类型
// export type SearchProps = {
//   el?: SearchType; // 当前项搜索框的类型
//   props?: any; // 搜索项参数，根据 element plus 官方文档来传递，该属性所有值会透传到组件
//   key?: string; // 当搜索项 key 不为 prop 属性时，可通过 key 指定
//   order?: number; // 搜索项排序（从大到小）
//   span?: number; // 搜索项所占用的列数，默认为1列
//   offset?: number; // 搜索字段左侧偏移列数
//   defaultValue?: string | number | boolean | any[]; // 搜索项默认值
//   render?: (scope: SearchRenderScope) => VNode; // 自定义搜索内容渲染（tsx语法）
// } & Partial<Record<BreakPoint, Responsive>>;

// props
//   columns?: ColumnProps[]; // 搜索配置列
//   searchParam?: { [key: string]: any }; // 搜索参数
//   searchCol: number | Record<BreakPoint, number>;
//   search: (params: any) => void; // 搜索方法
//   reset: (params: any) => void; // 重置方法
</script> 